<template>
  <el-row :gutter="20">
    <el-col :xs="8" :sm="6" :md="4" v-for="item in foodTable" :key="item.id"
      ><div
        class="bg-order bg-purple"
        :class="{ 'grid-content': item.food_table_action }"
      >
        <div class="title">
          <p>桌号</p>
          <h4>{{ item.food_table_number }}</h4>
          <p>
            <span v-show="item.food_table_peoples > 0"
              >就餐人数：{{ item.food_table_peoples }}</span
            >
            <span v-show="item.food_table_peoples == 0">11人桌</span>
          </p>
        </div>
        <div class="order-btn">
          <el-button type="primary" size="medium" :data-id="item.id"
            >开始点餐</el-button
          >
          <br />
          <el-button
            type="primary"
            size="medium"
            class="settle-btn"
            v-show="item.food_table_action"
            >结账</el-button
          >
        </div>
      </div></el-col
    >
  </el-row>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "orderTable",
  components: {},
  data() {
    return {
      peoples: 0,
    };
  },
  methods: {
    ...mapActions(["setFoodTable"]),
  },
  computed: {
    ...mapState(["foodTable"]),
  },
  watch: {},
  mounted() {
    this.setFoodTable();
  },
};
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}

.bg-purple {
  border-radius: 12px;
  padding: 12px 20px;
  height: 240px;
  color: #fff;
}
.bg-order {
  background: #9fa0a0 url(../assets/bg03.png) no-repeat center/cover;
}
.grid-content {
  background: #1369c1 url(../assets/bg03.png) no-repeat center/cover;
}
.title {
  h4 {
    color: #ffd303;
    font-size: 24px;
    font-style: italic;
  }
  p {
    font-size: 14px;
    margin: 8px 0;
  }
}
.order-btn {
  .el-button {
    background-color: transparent;
    border: 1px solid #fff;
    box-shadow: 4px 4px 0px 2px #fff;
    margin-top: 20px;
    width: 72%;
    &:hover {
      border: 1px solid #ffd303;
      box-shadow: 4px 4px 0px 2px #ffd303;
      color: #ffd303;
    }
    // padding: 10px 10px;
  }

  .settle-btn {
    margin-left: 40%;
    width: 48%;
  }
}
</style>
